<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<select name="province" id="province">
    <option selected>请选择省份</option>
</select>
<select name="city" id="city">
    <option selected>请选择城市</option>
</select>
</body>
<script>
    data = {"河北": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]}
    var pro = document.getElementById('province')
    for(k in data){
        var opt = document.createElement('option')
        opt.innerText = k
        pro.appendChild(opt)
    }
    pro.onchange = function () {
        var city = document.getElementById('city')
        city.innerText = null
        var ind = this.options.selectedIndex
        var key = this.children[ind].innerText
        console.log(key)
        for(var i in data[key]){
            console.log(i,typeof i)
            var val = data[key][i]
            var opt = document.createElement('option')
            opt.innerText = val
            city.appendChild(opt)
        }
    }
</script>
</html>